<template>
    <div class="post-list">
        <div class="item" v-for="item in list" :key="item.id">
            <h4><a href="javascript:;">{{item.title}}</a></h4>
            <div class="content">
                <img :src="item.image">
                <p>{{item.content}}</p>
            </div>
            <span class="text-muted">{{item.createdAt}}</span>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { PostProps } from './../testData';
export default defineComponent({
    name: 'post-list',
    props: {
        list: {
            type: Array as PropType<PostProps[]>,
            required: true,
        }
    }
})
</script>

<style lang="less" scoped>
.post-list {
    padding: 0px 200px;
    box-sizing: border-box;
    margin-top: 30px;
    .item {
        height: 252px;
        border: 1px solid #dee2e6!important;
        border-radius: 10px;
        padding: 16px;
        box-sizing: border-box;
        margin-bottom: 30px;
        h4 {
            a {
                color: #1a1a1a;
                font-size: 24px;
                &:hover {
                    color: #0d6efd;
                }
            }
        }
        .content {
            display: flex;
            margin: 16px 0px;
            img {
                width: 200px;
                height: 110px;
                margin-right: 20px;
                border-radius: 10px;
            }
            p {
                color: #6c757d;
                font-size: 16px;
            }
        }
        .text-muted {
            color: #6c757d;
            font-size: 16px;
        }
    }
}
</style>